<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>茅台物联网云商二维码系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/base.css" />
	</head>

	<body>
		<img id="loading" src="images/loading.gif" style="width:74px;height:94px;position:fixed;top:50%;left:50%;margin:-47px 0 0 -37px;z-index:-1;" />
		<!--页面没有加载完全前显示加载图片-->
		<div class="Start" style="opacity:0;">
			<div class="Start-zhiwen" id="div1">
				<div class="Start-zhiwen-block">
					<img src="images/zhiwen2.png" />
					<img src="images/finger_line.png" class="finger_line" />
					<div class="Start-zhiwen-info">扫描中……</div>
				</div>
				<!--end Start-zhiwen-block-->
			</div>
			<!--end Start-zhiwen-->
		</div>
		<!--end Start-->

		<div class="bodyBlock" style=" opacity:0;">
			<div class="bgMusic" onclick="playOrPaused(this);" id="bgMusicBlock">
				<img src="images/bgMusic.png" class="bgMusic-img" />
				<audio src="other/music.mp3" loop autoplay="autoplay" id="bgMusicActionStop"></audio>
			</div>
			<img src="images/music.gif" class="music-bg" />
			<!--音乐向外扩张的图片-->
			<!--end bgMusic-->
			<img class="logoPic" src="images/logoPic.png">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide slide1">
						<i style="background-image:url(images/00.jpg)"></i>
					</div>
					<div class="swiper-slide slide2">
						<i class="ani" swiper-animate-effect="fadeOut" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="background-image:url(images/01.jpg)"></i>
						<i class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1s" style="background-image:url(images/01_1.jpg)"></i>
						<i style="background:#FFFFFF"></i>
					</div>
					<div class="swiper-slide slide3">
						<i style="background-image:url(images/03.jpg)"></i>
						<img src="images/plane.png" class="ani plane" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay=".5s">
					</div>
					<div class="swiper-slide slide4">
						<i style="background-image:url(images/04.jpg)"></i>
						<img src="images/plane_2.png" class="ani plane" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay=".2s">
					</div>
					<div class="swiper-slide slide5">
						<i style="background-image:url(images/04.jpg)"></i>
						<div class="ani signUp" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="0s">
							<div class="signUp-item">
								<div class="signUp-item-content">
									<span class="signUp-item-text"><input type="tel" id="tel" onClick="signUpTextClick(this);" maxlength="11"  placeholder="请输入您的手机号码"></span>
								</div>
								<!--end signUp-item-content-->
							</div>
							<div class="signUp-item">
								<div class="signUp-item-content">
									<span class="signUp-item-text" style="background: #4A8AB6;"><input type="text"  maxlength=""  placeholder="请输入您的预约地址"></span>
								</div>
								<!--end signUp-item-content-->
							</div>
							<div class="signUp-item">
								<div class="signUp-item-content">
									<span class="signUp-item-text"><input type="text" id="userName" onClick="signUpTextClick(this);" placeholder="请输入您的预约时间"></span>
								</div>
								<!--end signUp-item-content-->
							</div>
							<a class="signUp-button" onClick="submitForm();">预&nbsp;&nbsp;约</a>
						</div>
						<!--end signUp-->
					</div>

					<div class="swiper-slide slide6">
						<i style="background-image:url(images/05.jpg)"></i>
						<img src="images/succeed.png" class="ani succeed" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay=".2s">
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/swiper.animate.min.js"></script>
		<script type="text/javascript" src="js/autoBrowser.js"></script>
		<script type="text/javascript" src="js/music.base.js"></script>
		<script type="text/javascript" src="js/base.js"></script>
		<script type="text/javascript" src="js/alert.js"></script>
		<script>
			var imgWidth, bodyHeight, sign;
			 //验证手机号码是否正确
			function validatemobile(mobile) {
					var myreg = /^0?1[3|4|5|8][0-9]\d{8}$/;
					if (mobile.length == 0) {
						//WapAlert('请输入手机号码！');
						WapWapAlert("请输入手机号码!");
						sign = false;
						return false;
					} else if (mobile.length != 11) {
						WapAlert('请输入有效的手机号码！');
						sign = false;
						return false;
					} else if (!myreg.test(mobile)) {
						WapAlert('请输入有效的手机号码！');
						sign = false;
						return false;
					} else {
						return true;
					}
				}
				//点击按钮进行表单验证

			function submitForm() {
				var companyName = $.trim($("#companyName").val());
				var userName = $.trim($("#userName").val());
				var tel = $.trim($("#tel").val());
				var post = $.trim($("#post").val());
				sign = true;
				//	if(companyName == ""){
				//		WapAlert("请输入公司名称");
				//		sign = false;
				//		return false;
				//	}else if(userName == ""){
				//		WapAlert("请输入姓名");
				//		sign = false;
				//		return false;
				//	}else if(tel == ""){
				//		WapAlert("请输入电话");
				//		sign = false;
				//		return false;
				//	}else if(post == ""){
				//		WapAlert("请输入职务");
				//		sign = false;
				//		return false;
				//	}else{
				//		validatemobile(tel);
				//	}
				if (sign == true) {
					WapAlert("恭喜您预约成功！");
				}
			}
		</script>
	</body>

</html>